﻿<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Uploadify</title>
    <link rel="stylesheet" type="text/css" href="/content/scripts/components/uploadify/uploadify.css" />
    <script src="/Content/Scripts/Frameworks/require.js"></script>
    <script src="/Content/Scripts/Frameworks/main.js"></script>
    <style type="text/css">
        .uploaded-image-area { display: none; padding-top: 5px; font-size: 12px; }

        .uploaded-image-item { background: #fafafa; width: 160px; margin: 5px 0 15px 0; text-align: center; height: 100px; line-height: 100px; position: relative; }

        .uploaded-image-item img { vertical-align: middle; }

        .uploaded-image-size, .uploaded-image-caption, .uploaded-image-alternative, .uploaded-image-align { position: absolute; height: 30px; left: 170px; line-height: 30px; text-align: left; width: 410px; }

        .uploaded-image-size { top: 2px; }

        .uploaded-image-size input, .uploaded-image-caption input { vertical-align: middle; }

        .uploaded-image-align { top: 35px; }
        .uploaded-image-caption { top: 68px; }

        a.remove { color: #FF0000; cursor: pointer; display: inline-block; font-weight: bold; height: 20px; left: 550px; line-height: 20px; position: absolute; top: 5px; width: 20px; }
    </style>
</head>
<body>
    <span style="display: block; border-bottom: 1px solid silver; padding-bottom: 5px; font-size: 12px; margin-bottom: 5px;">上传本地文件：</span>
    <input type="file" id="js-uploadify" style="display: none;" />
    <div id="js-uploaded-image-area" class="uploaded-image-area">
        <span style="display: block; border-bottom: 1px solid silver; padding-bottom: 5px;">已上传文件：</span>
    </div>

    <script type="text/javascript">
        requirejs(['uploadify'], function ($) {
            var selector = {
                uploadify: '#js-uploadify',
                buttonBaseClass: 'uploadify-button-base',
                allButtons: '.uploadify-button-base',
                uploadButton: '.uploadify-button-upload',
                uploadButtonClass: 'uploadify-button-upload',
                stopButton: '.uploadify-button-stop',
                stopButtonClass: 'uploadify-button-stop',
                cancelButton: '.uploadify-button-cancel',
                cancelButtonClass: 'uploadify-button-cancel',
                uploadedImageArea: '#js-uploaded-image-area',
                uploadedImageItemClass: 'uploaded-image-item',
                uploadedImageSizeClass: 'uploaded-image-size',
                imageWidthClass: 'js-image-width',
                imageWidth: '.js-image-width',
                imageHeightClass: 'js-image-height',
                imageHeight: '.js-image-height',
                imageProportionClass: 'js-image-proportion',
                imageProportion: '.js-image-proportion',
                uploadedImageCaptionClass: 'uploaded-image-caption',
                imageCaptionClass: 'js-image-caption',
                uploadedImageAlignClass: 'uploaded-image-align'
            };

            var $uploadify = $(selector.uploadify);
            var uploadifyQueueId;   //获取操作放到uploadify的init中，因为此时文件队列容器还未被uploadify创建
            var $uploadedImageArea = $(selector.uploadedImageArea);
            var $uploadifyButtonUpload,
                $uploadifyButtonStop,
                $uploadifyButtonCancel;

            var $appendToEditorButton = $(selector.appendToEditorButton);

            var hideAllUploadifyButtons = function () {
                $(selector.allButtons).hide();
            };
            var showUploadButton = function () {
                $uploadifyButtonUpload.css('display', 'inline-block');
            };
            var hideUploadButton = function () {
                $uploadifyButtonUpload.hide();
            };
            var showStopButton = function () {
                $uploadifyButtonStop.css('display', 'inline-block');
            };
            var hideStopButton = function () {
                $uploadifyButtonStop.hide();
            };
            var showCancelButton = function () {
                $uploadifyButtonCancel.css('display', 'inline-block');
            };
            var hideCancelButton = function () {
                $uploadifyButtonCancel.hide();
            };
            var insertButtons = function (uploadifyQueueId) {
                var buttonsHtml = '<div class="' + selector.buttonBaseClass + ' ' + selector.uploadButtonClass + '" >开始上传</div>' +
                                  '<div class="' + selector.buttonBaseClass + ' ' + selector.stopButtonClass + '">暂停上传</div>' +
                                  '<div class="' + selector.buttonBaseClass + ' ' + selector.cancelButtonClass + '">移除队列中文件</div>';
                $(buttonsHtml).insertBefore($(uploadifyQueueId));
            };
            var cacheButtonsReference = function () {
                $uploadifyButtonUpload = $(selector.uploadButton);
                $uploadifyButtonStop = $(selector.stopButton);
                $uploadifyButtonCancel = $(selector.cancelButton);
            };
            var bindEventForUploadifyButtons = function () {
                $uploadifyButtonUpload.on('click', function () {
                    $uploadify.uploadify('upload', '*');
                    showStopButton();
                });
                $uploadifyButtonStop.on('click', function () {
                    $uploadify.uploadify('stop', '*');
                });
                $uploadifyButtonCancel.on('click', function () {
                    $uploadify.uploadify('cancel', '*');
                });
            };
            var insertUploadifyButtonsBuforeQueue = function (queueID) {
                uploadifyQueueId = '#' + queueID;
                insertButtons(uploadifyQueueId);
                cacheButtonsReference();
                bindEventForUploadifyButtons();
            };

            var showAppendToEditorButton = function () {
                $appendToEditorButton.css('display', 'inline-block');
            };

            $uploadify.uploadify({
                auto: false,
                height: 28,
                width: 90,
                swf: $.fn.uploadify.swf,
                buttonText: '选择文件...',
                fileTypeExts: '*.jpg;*.png;*.gif',
                removeTimeout: 0,
                uploader: '/Upload/Index',
                multi: true,

                //uploadify初始化时执行事件
                onInit: function (instance) {
                    //插入“开始上传”，“暂停上传”，“移除队列中文件”按钮
                    insertUploadifyButtonsBuforeQueue(instance.settings.queueID);
                },
                onDialogClose: function (queueData) {
                    if (queueData.queueLength > 0) {
                        showUploadButton();
                        showCancelButton();
                    }
                },
                onCancel: function () {
                    if (this.queueData.queueLength === 0 && this.queueData.fileSelected === 0) {
                        hideAllUploadifyButtons();
                    }
                },
                onClearQueue: function () {
                    hideAllUploadifyButtons();
                },
                onQueueComplete: function (queueData) {
                    hideAllUploadifyButtons();
                    if (queueData.uploadsSuccessful > 0) {
                        showAppendToEditorButton();
                    }
                },
                onUploadStart: function () {
                    var d = new Date();
                    var year = d.getFullYear().toString();
                    var mon = (d.getMonth() + 1).toString();
                    var day = d.getDate().toString();
                    var hour = d.getHours().toString();
                    var time = day + hour + year + mon;
                    //注意：此处不可使用保存的变量$uploadify，否则formData将不会设置成功并被post发送
                    //     使用$('#js-uploadify')即可解决问题
                    $('#js-uploadify').uploadify('settings', 'formData', {
                        ResType: 11,
                        sourceFile: 'MGPSource',
                        copyFile: 'MGPThumbnail',
                        identify: time + '11'
                    });
                },
                onUploadSuccess: function (file, data, response) {
                    var dataObj = $.parseJSON(data);
                    if (dataObj.IsSuccess) {
                        var imgSrc = dataObj.Value;

                        //用于radio分组
                        var random = Math.random();
                        var alignName = 'align' + random;

                        var img = new Image();
                        img.src = imgSrc;
                        img.onload = function () {
                            var originalWidth = img.width,
                                originalHeight = img.height;
                            var width, height;
                            if ((originalWidth / originalHeight) >= (16 / 10)) {
                                width = originalWidth >= 160 ? 160 : originalWidth;
                                height = Math.floor(width * (originalHeight / originalWidth));
                            } else {
                                height = originalHeight >= 100 ? 100 : originalHeight;
                                width = Math.floor(height * (originalWidth / originalHeight));
                            }
                            var $imageItem = $('<div class="' + selector.uploadedImageItemClass + '"></div>');
                            $imageItem.append('<img src="' + imgSrc + '" width="' + width + '" height="' + height + '" data-width="' + originalWidth + '" data-height="' + originalHeight + '"/>');
                            $imageItem.append('<div class="' + selector.uploadedImageSizeClass + '">' +
                                                '<span>宽: </span><input class="js-image-width" type="text" style="width:30px;" value="' + originalWidth + '"/> ' +
                                                '<span>&nbsp;高: </span><input class="js-image-height" type="text" style="width:30px;" value="' + originalHeight + '"/> ' +
                                                '<input class="js-image-proportion" type="checkbox" title="锁定比例" checked="checked" data-proportion="' + originalWidth / originalHeight + '"/><span>锁定比例</span>' +
                                              '</div>' +
                                              '<div class="' + selector.uploadedImageAlignClass + '">' +
                                                '<span>对齐方式: </span><input name="' + alignName + '" type="radio" value="none" checked="checked"/><span>无</span>' +
                                                '<input name="' + alignName + '" type="radio" value="left"/><span>左 </span>' +
                                                '<input name="' + alignName + '" type="radio" value="center"/><span>中 </span>' +
                                                '<input name="' + alignName + '" type="radio" value="right"/><span>右</span>' +
                                              '</div>' +
                                              '<div class="' + selector.uploadedImageCaptionClass + '">' +
                                                '<span>图片标题: </span><input type="text" style="width:250px;"/> <input type="checkbox" title="图片带标题"/><span>带标题图片</span>' +
                                              '</div><a class="remove" title="移除此图片">×</a>');
                            $uploadedImageArea.append($imageItem).show();
                        }
                    }
                }
            });

            //图片尺寸控制
            $uploadedImageArea.on('input propertychange', selector.imageWidth + ',' + selector.imageHeight, function () {
                var $target = $(this);
                var $proportion = $target.siblings(selector.imageProportion),
                    proportion = +$proportion.attr('data-proportion');
                if ($target.siblings('input:checked').size() === 1) {
                    var number = $target.val();
                    if (!isNaN(number)) {
                        if ($target.attr('class') === selector.imageWidthClass) {
                            $target.siblings(selector.imageHeight).val(Math.floor(+number / proportion));
                        } else {
                            $target.siblings(selector.imageWidth).val(Math.floor(+number * proportion));
                        }
                    }
                }
            });


            //移除已上传的图片
            $uploadedImageArea.on('click', 'a.remove', function () {
                $(this).parent('.' + selector.uploadedImageItemClass).remove();
                if ($uploadedImageArea.find('.' + selector.uploadedImageItemClass).size() === 0) {
                    $uploadedImageArea.hide();
                }
            });

        });
    </script>
</body>
</html>
